<template>
  <div class="comment">
    <header>
      <h1 class="title">
        发表评论
      </h1>
    </header>
    <div class="contnet">
      <textarea
        class="text"
        name=""
        id=""
        cols="30"
        rows="10"
        v-model="content"
      ></textarea>
      <van-button
        type="danger"
        block
        class="btnsub"
        @click="postComment"
      >提交</van-button>
      <ul>
        <li
          class="contentList"
          v-for="(conmments,index) in conmment"
          :key="conmments.id"
        >
          <span>第{{index+1}}楼</span>
          <span>用户：{{conmments.user_name}}</span>
          <span>发布时间:{{conmments.add_time}}</span>
          <p class="ptext">{{conmments.content}}</p>
        </li>
      </ul>
      <van-button
        type="warning"
        block
        @click="getMores()"
      >{{isHasMore?"没有更多了" : "加载更多"}}</van-button>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    content: '',
    conmment: [],
    page: 1,
    pageSize: 2,
    isHasMore: false
  }),
  props: ['id'],
  created() {
    this.getComment()
  },
  methods: {
    async getComment() {
      if (this.isHasMore !== false) return
      try {
        ++this.page
        const { data: { message, count } } = await this.Api.getComment({ id: this.id, page: this.page, pageSize: this.pageSize })
        // console.log(message)
        this.conmment = this.conmment.concat(message)
        this.isHasMore = this.page * this.pageSize > count
      } catch (error) {
        this.$Toast('请求评论数据失败...' + error.message)
      }
    },
    async postComment () {
      try {
        console.log(this.content)
        const { data: { message } } = await this.Api.postComment({ id: this.id, content: this.content })
        console.log(message)
        this.conmment.unshift({
          add_time: new Date().getTime(),
          content: this.content,
          id: new Date().getTime(),
          user_name: '匿名用户'
        })
        // 清空输入框
        this.content = ''
        // this.$refs.contentRef.foucs()
      } catch (error) {
        this.$Toast('请求评论数据失败...' + error.message)
      }
    },
    getMores() {
      this.getComment()
    }
  }
}
</script>
<style lang="less" scoped>
.contnet{
  .text{
    width: 98%;
  }
  .btnsub{
    margin-bottom: 10px;
  }
  .contentList{
    margin-bottom: 10px;
    float: left;
    // justify-content: space-between;
  }
  .contentList>span{
    margin-right: 30px;
  }
}
</style>
